<template>
    <div id="root">
        <div class="container">
<!--            :listData="foods"-->
            <Category title="美食" >
                <img slot="center" src="./assets/food.jpg" alt="美食">
                <div class="container" slot="footer" >
                    <a href="atguigu.com">更多美食...</a>
                </div>
            </Category>
            <Category title="游戏" :listData="games">
                <div class="container" slot="footer">
                    <a href="atguigu.com">更多电游...</a>
                    <a href="atguigu.com">更多手游...</a>
                </div>
            </Category>
<!--            :listData="films"-->
            <Category title="电影" >
                <video slot="center" controls src="./assets/陈局长-赴汤蹈火啊.mp4"></video>
                <div class="container" slot="footer">
                    <a href="atguigu.com">科幻...</a>
                    <a href="atguigu.com">生活...</a>
                    <a href="atguigu.com">历史...</a>
                </div>
                <h4 class="container" slot="bottom">欢迎到万达影院观看！</h4>
            </Category>

        </div>
    </div>

</template>
<script>

import Category from "./components/Category.vue";
export default {
    name:'App',
    components:{Category},
    data(){
        return {


            foods: ['火锅', '烧烤', '小龙虾', '牛排'],
            games: ['红色警戒','穿越火线','劲舞团','超级玛丽'],
            films: ['教父','拆弹专家','你好，李焕英','尚硅谷']
        }
    },
    methods:{

    }
}
</script>

<style>
.container{
    display: flex;
    justify-content: space-around;
}
</style>
